<script lang="ts" setup>
import { defineAsyncComponent, computed } from 'vue'
import { bikeShortTermDetailOrderTableCol } from '@/api/user/types/user'
import { useRouter } from 'vue-router'
import { FeeRulesType } from '@/types/enum'

const FeeBreakdownInfo = defineAsyncComponent(
  () => import('@/components/popover/FeeBreakdownInfo.vue')
)
const TieredBillingInfo = defineAsyncComponent(
  () => import('@/components/popover/TieredBillingInfo.vue')
)
const props = defineProps<{
  data: bikeShortTermDetailOrderTableCol[]
  loading: boolean
}>()
const emits = defineEmits(['open-adjust', 'open-operate'])
const router = useRouter()
const showUserOperateRecord = (row: bikeShortTermDetailOrderTableCol) => {
  router.push({
    name: 'TimeRentUserRecord',
    query: {
      bikeCode: row.bikeCode,
      phone: row.phone,
      orderId: row.orderId,
      type: ''
    }
  })
}
const showBikeLocus = (row: bikeShortTermDetailOrderTableCol) => {
  router.push({
    name: 'TimeBikeOrderLocus',
    query: {
      bikeId: row.bikeId,
      orderId: row.orderId,
    }
  })
}
const bikeLocation = (row: bikeShortTermDetailOrderTableCol) => {
  router.push({
    name: 'TimeBikeLocation',
    query: {
      bikeId: row.bikeId,
      storeId: row.storeId
    }
  })
}
const openMoneyOperateDialog = (row: bikeShortTermDetailOrderTableCol) => {
  emits('open-operate', row)
}
const changeUnPaid = (row: bikeShortTermDetailOrderTableCol) => {
  emits('open-adjust', row.orderId, row.userId)
}
/** 计费规则 */
const changeProductType = computed(() => {
  return (productType: FeeRulesType) => {
    switch (productType) {
      case 'TimeBased':
        return '按时长计费'
      case 'Tiered':
        return '按阶梯计费'
      default:
        return ''
    }
  }
})
const changeStatus = computed(() => {
  return (status: number) => {
    switch (status) {
      case 2:
        return '已支付'
      case 1:
        return '待支付'
      default:
        return ''
    }
  }
})
const formatStatusColor = (status: number) => {
  switch (status) {
    case 2:
      return {
        color: 'var(--xy-success-color)'
      }
    case 1:
      return {
        color: 'var(--xy-warning-color)'
      }
    default:
      return ''
  }
}
</script>

<template>
  <el-table :data="data" class="no-border" v-loading="loading">
    <el-table-column prop="orderId" label="行程编号" min-width="250" align="center" />
    <el-table-column prop="phone" label="手机号" min-width="150" align="center">
      <template #default="scope">
        <el-popover>
          <span>{{ scope.row.rentCardName }}</span>
          <template #reference>
            <span class="cursor-pointer">{{ scope.row.phone }}</span>
          </template>
        </el-popover>
      </template>
    </el-table-column>
    <el-table-column prop="bikeCode" label="车辆编号" min-width="120" align="center" />
    <el-table-column prop="startTime" label="开始时间" min-width="200" align="center" />
    <el-table-column prop="endTime" label="结束时间" min-width="200" align="center" />
    <el-table-column prop="rideDuration" label="骑行时长" min-width="120" align="center" />
    <el-table-column label="实际支付" align="center">
      <template #default="scope">
        <el-popover
          placement="bottom"
          width="auto"
          trigger="click"
          v-if="
            JSON.stringify(scope.row.tradeExtensionData) !== '{}' &&
            scope.row.tradeExtensionData &&
            scope.row.status
          "
        >
          <template #reference>
            <span class="cursor-pointer">{{ scope.row.tradeExtensionData.pay[0].value }}</span>
          </template>
          <template #default>
            <fee-breakdown-info :status="scope.row.status" :data="scope.row.tradeExtensionData" />
          </template>
        </el-popover>
        <span v-else>{{ scope.row.rideAmount }}</span>
      </template>
    </el-table-column>
    <el-table-column label="其他收费" align="center">
      <template #default="scope">
        <el-popover
          placement="bottom"
          width="auto"
          trigger="click"
          v-if="
            JSON.stringify(scope.row.otherExTensionData) !== '{}' && scope.row.otherExTensionData
          "
        >
          <template #reference>
            <span class="cursor-pointer">{{ scope.row.otherAmount }}</span>
          </template>
          <template #default>
            <fee-breakdown-info :data="scope.row.otherExTensionData" type="other" />
          </template>
        </el-popover>
        <span v-else>{{ scope.row.otherAmount }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="status" label="付费状态" align="center" min-width="120">
      <template #default="scope">
        <span v-if="scope.row.status === 1" :style="formatStatusColor(scope.row.status)">{{
          scope.row.statusName
        }}</span>
        <span v-else :style="formatStatusColor(scope.row.status)">{{
          changeStatus(scope.row.status)
        }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="feeRules" label="计费规则" align="center">
      <template #default="scope">
        <el-popover
          placement="bottom"
          trigger="hover"
          popper-class="tiered-billing-popover"
          width="auto"
        >
          <template #reference>
            <span class="cursor-pointer is-reference">{{
              changeProductType(scope.row.productType)
            }}</span>
          </template>
          <template #default>
            <tiered-billing-info
              :title="changeProductType(scope.row.productType)"
              :data="scope.row.feeRules"
            />
          </template>
        </el-popover>
      </template>
    </el-table-column>
    <el-table-column label="车辆位置" align="center">
      <template #default="scope">
        <el-button type="primary" class="is-show" link @click="bikeLocation(scope.row)"
          >查看</el-button
        >
      </template>
    </el-table-column>
    <el-table-column label="操作记录" align="center">
      <template #default="scope">
        <el-button type="primary" class="is-show" link @click="showUserOperateRecord(scope.row)"
          >查看</el-button
        >
      </template>
    </el-table-column>
    <el-table-column label="骑行轨迹" align="center">
      <template #default="scope">
        <el-button type="primary" class="is-show" link @click="showBikeLocus(scope.row)"
          >查看</el-button
        >
      </template>
    </el-table-column>
    <el-table-column label="操作" fixed="right" align="center">
      <template #default="scope">
        <el-button
          type="primary"
          link
          class="is-open"
          v-if="scope.row.statusName !== '已支付' && scope.row.endTime"
          @click="changeUnPaid(scope.row)"
          >待付调整</el-button
        ><span />
        <el-button
          type="primary"
          link
          class="is-open"
          @click="openMoneyOperateDialog(scope.row)"
          v-if="scope.row.endTime"
          >收/退费</el-button
        >
      </template>
    </el-table-column>
  </el-table>
</template>

<style scoped></style>
